﻿<?xml version="1.0" encoding="utf-8"?>
<html xmlns:MadCap="http://www.madcapsoftware.com/Schemas/MadCap.xsd" MadCap:timeEstimate="0" MadCap:priority="0" MadCap:status="In Progress" MadCap:conditions="" xml:lang="en-us" class="" MadCap:lastBlockDepth="9" MadCap:lastHeight="1205" MadCap:lastWidth="876" MadCap:conditionTagExpression="">
    <head><title></title>
        <script type="text/javascript" src="Resources/JavaScript/jquery-1.3.2.min.js">
        </script>
        <script type="text/javascript" src="Resources/JavaScript/MemexWebHelp.js">
        </script>
    </head>
    <body>
        <h1><a name="top"></a>Add ITauthor <MadCap:keyword term="slide-down" />slide-downs</h1>
        <p>ITauthor <span class="glossPopup" MadCap:targetName="slidedown">slide-downs</span> are list items (<b>li</b> elements) within an unordered list (a <b>ul</b> element). A CSS class applied to the <b>li</b> element defines that list item as a slide-down. Automatically, the first element within the list item becomes the <span class="glossPopup" MadCap:targetName="expander">expander </span>and all subsequent elements become the contents of the slide-down.</p>
        <p class="proclabel">To add a slide-down:</p>
        <ol>
            <li>
                <p>Open the topic to which you want to add slide-downs.</p>
            </li>
            <li>
                <p>Make sure the structure bars are displayed.</p>
                <p>If they're not, click the Toggle show blocks icon in the toolbar at the bottom of the topic page.</p>
            </li>
            <li>
                <p>At the position where you want to place the slide-downs, create a new paragraph and enter the text of the expander for the first slide-down.  <![CDATA[ ]]></p>
            </li>
            <li>
                <p>Choose <b>Format</b> &gt; <b>List</b> &gt; <b>Bullet list</b> to turn the paragraph into a standard bullet list.</p>
            </li>
            <li>
                <p>Right-click the <b>li</b> element in the structure bars and choose <b>Make Paragraph Item(s)</b>.</p>
            </li>
            <li>Add some content for the slide-down.</li>
            <li>
                <p>Right-click the <b>li</b> element in the structure bars and choose <b>Style Class</b> &gt; <b>li.expandCollapse</b>.</p>
                <p>The style of the list item changes to show the plus icon next to the expander and to indicate the contents of the slide-down.</p>
                <div class="notebox">
                    <p class="notehead">Note</p>
                    <p>
                        <p>Slide-downs don't operate within Flare's XML editor. If you want to check a slide-down is working, click the Preview compiled topic icon in the toolbar at the top of the topic tab.</p>
                    </p>
                </div>
            </li>
            <li>
                <p>Change the style of the expander text from a simple paragraph to a heading style (for example, an h5 heading) by selecting from the Style drop-down list in the Text Format toolbar.</p>
            </li>
            <li>
                <p>Add a new list item for each slide-down you want to add. </p>
                <div class="notebox">
                    <p class="notehead">Note</p>
                    <p>
                        <p>You must change the class of each <b>li</b> element you want to be displayed as a slide-down. This is because you may want to have a bullet list in which only some of the list items are slide-downs, leaving the others as standard bullet items.</p>
                    </p>
                </div>
            </li>
        </ol>
        <h2>
            <MadCap:keyword term="expand all" />"Expand all" links</h2>
        <p>If you have a list of more than three slide-downs it's good to give readers a single-click way to expand/collapse all of the slide-downs.</p>
        <p class="proclabel">To add an "expand all" link:</p>
        <ol>
            <li>
                <p>Add a paragraph containing the words "expand all".</p>
                <p>For example, "Click the headings below to see details of that system setting. Alternatively, expand all."</p>
            </li>
            <li>
                <p>Select the words "expand all".</p>
            </li>
            <li>
                <p>Right-click the selected text and choose <b>Hyperlink</b>.  </p>
            </li>
            <li>
                <p>In the Insert Hyperlink dialog box, select the <b>Place in this Document</b> radio button.</p>
            </li>
            <li>Click <b>Top of the document</b> is the structure diagram within the dialog box.</li>
            <li>For the Style Class, click <b>Select</b> and choose <b>a.expandall</b>.</li>
            <li>Click <b>OK</b>.</li>
        </ol>
        <h2>Slide-down example</h2>
        <p>Slide-downs provide a useful way to avoid cluttering a topic with information that only some readers will read. Click a heading to see more information. Alternatively,
<a href="#top" class="expandall">expand all</a>.</p>
        <ul>
            <li class="expandCollapse">
                <h5>
                    <!-- EXPANDING SECTION HEADER -->Expander headings
        </h5>
                <p>Use an H5 heading style for the expander text.</p>
            </li>
            <li class="expandCollapse">
                <h5>
                    <!-- EXPANDING SECTION HEADER --><![CDATA[ ]]>Creating expanding sections
        </h5>
                <p>These sections are created by giving the <b>li</b> element the expandCollapse style.</p>
            </li>
            <li class="expandCollapse">
                <h5>
                    <!-- EXPANDING SECTION HEADER -->The "expand all" link
        </h5>
                <p><![CDATA[ ]]>The "expand all" link must use these words. It is created by making this text a hyperlink to the top of page, with the class expandall.</p>
            </li>
        </ul>
        <p class="spaceabove">
            <MadCap:relatedTopics class="RelatedTopics">
                <MadCap:relatedTopic src="addITauthorglossarypopup.html" />
            </MadCap:relatedTopics>
        </p>
    </body>
</html>